<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" fullscreen>
    <el-form ref="form" :model="form" inline label-width="160px">
      <el-form-item label="请选择打印模板" >
        <el-select v-model="bindPrintId" placeholder="请选择模板" style="width:200px" @change="printTemplateChange">
          <el-option
            v-for="(item) in printMainList"
            :key="item.id"
            :label="item.reportName"
            :value="item.id"/>
        </el-select>
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-printer"
          @click="doPrint"
        >打印</el-button>
        <el-select v-model="reportType" placeholder="请选择导出格式" style="width:200px">
          <el-option
            label="Excel"
            value="xlsx"/>
          <el-option
            label="Pdf"
            value="pdf"/>
        </el-select>
        <el-button
          v-loading="exportLoading"
          class="filter-item"
          type="warning"
          icon="el-icon-download"
          @click="doExport"
        >导出</el-button>
      </el-form-item>
    </el-form>
    <printFrame ref="printFrame" :src="printHtmlUrl" iframe-id="printFrame"/>
  </el-dialog>
</template>

<script>
import printFrame from '@/components/iframe/index'
import { getPrintByReportCode } from '@/api/system/sysPrint'
import { postRequest } from '@/api/data'
import { downloadTempAttachment } from '@/api/system/fileMng'

export default {
  components: { printFrame },
  props: {
    sup_this: {
      type: Object,
      default: null,
      required: true
    },
    printUrl: {
      type: String,
      default: '',
      required: true
    },
    reportCode: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      exportLoading: false,
      printHtmlUrl: '',
      printMainList: [],
      bindPrintId: '',
      reportType: 'xlsx', // xlsx/pdf
      form: {
        printMain: {
        }
      }
    }
  },
  created() {
  },
  methods: {
    printTemplateChange(bindPrintId) {
      if (!bindPrintId) return
      this.form.printMain = this.printMainList.filter(value => {
        return value.id === bindPrintId
      })[0]
      this.displayHtmlPage()
    },
    loadPrintPage(formData = null) {
      if (formData) {
        this.form = JSON.parse(JSON.stringify(formData))
      }
      this.printHtmlUrl = ''
      getPrintByReportCode(this.reportCode).then(res => {
        this.printMainList = res.data
        this.form.printMain = this.printMainList[0]
        this.bindPrintId = this.form.printMain.id
        this.displayHtmlPage()
      })
      this.dialog = true
    },
    displayHtmlPage() {
      const htmlData = JSON.parse(JSON.stringify(this.form))
      htmlData.reportType = 'html'
      const _this = this
      postRequest(this.printUrl, htmlData).then(res => {
        localStorage.removeItem('printHtml')
        localStorage.setItem('printHtml', res.data)
        this.printHtmlUrl = ''
        setTimeout(function() {
          _this.printHtmlUrl = process.env.BASE_ACCESS_URL + '/static/print/print.html'
        }, 300)
      }).catch(err => {
        console.log(err)
      })
    },
    doPrint() {
      const iframe = document.getElementById('printFrame')
      iframe.contentWindow.focus()
      iframe.contentWindow.print()
    },
    doExport() {
      this.$confirm('确认要导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.exportLoading = true
        this.form.reportType = this.reportType
        postRequest(this.printUrl, this.form).then(res => {
          // 直接打开对应的文件
          const exportFileName = (Date.parse(new Date()) + '.' + this.reportType)
          downloadTempAttachment(res.data, exportFileName)
          // window.open(downloadTempFileUrl(res.data), '_blank')
          this.exportLoading = false
        }).catch(err => {
          this.exportLoading = false
          console.log(err)
        })
      }).catch(() => {
        this.exportLoading = false
      })
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>
